<template>
  <a-spin :spinning="loading">
    <div class="file-edit page-miH page-bgBack">
      <PageHeader @back="goBack" subTitle="返回"> 详情 </PageHeader>
      <a-layout>
        <a-layout-sider width="276" class="border-r-line ta-center">
          <div class="file-user" style="margin-top: 40px">
            <a-row class="file-user-head" style="padding-left: 30px; padding-right: 30px">
              <a-col>
                <a-row>
                  <div style="font-size: 18px; font-weight: 400; color: #3c3d43; height: 40px">
                    {{ detailList.companyName }}
                  </div>
                </a-row>
                <a-row
                  class="pd_b10"
                  style="
                    padding-bottom: 15px;
                    color: #adadad;
                    border-bottom: 1px dashed #e8e8e8;
                    display: flex;
                    justify-content: space-around;
                  "
                >
                  <div class="buttonstyle2" v-if="detailList.invoiceStatus === 1">未开票</div>
                  <div class="buttonStyle" v-if="detailList.invoiceStatus === 3">部分开票</div>
                  <div class="buttonStyle3" v-if="detailList.invoiceStatus === 2">已开票</div>
                  <div class="buttonstyle2" v-if="detailList.payBackStatus === 1">未回款</div>
                  <div class="buttonStyle" v-if="detailList.payBackStatus === 3">部分回款</div>
                  <div class="buttonStyle3" v-if="detailList.payBackStatus === 2">已回款</div>
                </a-row>
                <a-row>
                  <div class="detailBox">
                    <div class="detailName">账单创建人：</div>
                    <div class="detail">{{ detailList.createUserName }}</div>
                  </div>
                  <div class="detailBox" v-if="detailList.yearly">
                    <div class="detailName">账单月份：</div>
                    <div class="detail">
                      {{
                        detailList.monthly >= 10
                          ? detailList.yearly + "-" + detailList.monthly
                          : detailList.yearly + "-0" + detailList.monthly
                      }}
                    </div>
                  </div>

                  <div class="detailBox">
                    <div class="detailName">应到账金额：</div>
                    <div class="detail">
                      {{ !detailList.totalAmount ? 0 : detailList.totalAmount.toLocaleString() }}
                    </div>
                  </div>
                  <div class="detailBox">
                    <div class="detailName">服务费金额：</div>
                    <div class="detail">
                      {{ !detailList.serviceFeeAmount ? 0 : detailList.serviceFeeAmount.toLocaleString() }}
                    </div>
                  </div>
                  <div class="detailBox">
                    <div class="detailName">人力成本：</div>
                    <div class="detail">
                      {{ !detailList.laborCost ? 0 : detailList.laborCost.toLocaleString() }}
                    </div>
                  </div>
                  <div v-if="detailList.fine" class="detailBox">
                    <div class="detailName">滞纳金：</div>
                    <div class="detail">
                      {{ !detailList.fine ? 0 : detailList.fine.toLocaleString() }}
                    </div>
                  </div>
                </a-row>
              </a-col>
              <a-divider />
              <a-button style="color: #767885; border: 1px solid rgba(0, 0, 0, 0.15)" @click="showAbolition"> 删除账单 </a-button>
            </a-row>
            <a-modal v-model="abolitionVisible" title="废除客户回款记录确认" @ok="handleAbolition" :width="450">
              <div style="display: flex; align-items: center; justify-content: left">
                <div style="margin-left: 15px; font-size: 35px" class="primary_color">
                  <a-icon type="question-circle" />
                </div>
                <div style="margin-left: 15px; position: relative; top: 3px; font-size: 16px; font-weight: 500; color: #000000ff">
                  <span
                    >您确定要
                    <span style="color: #ec5252ff">删除</span>
                    该条记录吗？删除后不可恢复，但可在本月客户明细单中重新点击生成回款记录。</span
                  >
                </div>
              </div>
            </a-modal>
          </div>
        </a-layout-sider>
        <a-layout-content class="ph24 mb100">
          <div style="display: flex; justify-content: space-between">
            <div class="fix-item-wrapper" style="width: 55%">
              <div>
                <div class="childpProjectName">应到账金额</div>
                <div class="childContentName" style="color: #3c3d43">
                  {{ !detailList.totalAmount ? 0 : detailList.totalAmount.toLocaleString() }}
                </div>
              </div>
              <div>
                <div class="childpProjectName">实际到账金额</div>
                <div class="childContentName" style="color: #3c3d43">
                  {{ !detailList.amountPaid ? 0 : detailList.amountPaid.toLocaleString() }}
                </div>
              </div>
              <div>
                <div class="childpProjectName">未到账金额</div>
                <div class="childContentName">
                  {{ !detailList.unpaidAmount ? 0 : detailList.unpaidAmount.toLocaleString() }}
                </div>
              </div>
            </div>
            <div class="fix-item-wrapper" style="width: 40%">
              <div>
                <div class="childpProjectName">已开票金额</div>
                <div class="childContentName" style="color: #3c3d43">
                  {{ !detailList.invoicedAmount ? 0 : detailList.invoicedAmount.toLocaleString() }}
                </div>
              </div>
              <div>
                <div class="childpProjectName">未开票金额</div>
                <div class="childContentName">
                  {{ !detailList.uninvoicedAmount ? 0 : detailList.uninvoicedAmount.toLocaleString() }}
                </div>
              </div>
            </div>
          </div>
          <div>
            <a-tabs>
              <a-tab-pane key="0" tab="回款记录">
                <a-button type="primary" style="margin-top: 10px" @click="showReceivable" v-if="detailList.payBackStatus !== 2">
                  新增回款记录
                </a-button>
                <a-modal v-model="receivableVisible" title="新增回款记录" @ok="handleReceivableOk" @cancel="handleCancel" :width="550">
                  <a-row class="header-title">
                    <div class="title-info">回款信息</div>
                    <hr class="title-line" />
                  </a-row>
                  <a-form-model
                    ref="ruleForm"
                    :model="receivableForm"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                    style="margin-top: 15px"
                  >
                    <a-form-model-item
                      style="margin-bottom: 0"
                      ref="receiveAmount"
                      label="本次实际到账金额"
                      prop="receiveAmount"
                      :rules="{
                        required: true,
                        message: '请输入'
                      }"
                    >
                      <a-input-number :min="0" :max="999999" v-model="receivableForm.receiveAmount" placeholder="请输入" />
                      <span style="font-size: 12px; color: #999999" v-if="detailList.unpaidAmount">
                        (本次回款金额不得高于未到账金额{{ !detailList.unpaidAmount ? 0 : detailList.unpaidAmount }})
                      </span>
                    </a-form-model-item>

                    <a-form-model-item
                      ref="payBackDate"
                      label="本次回款时间"
                      prop="payBackDate"
                      :rules="{
                        required: true,
                        message: '请选择'
                      }"
                    >
                      <a-date-picker
                        :disabled-date="disabledDate"
                        placeholder="选择回款时间"
                        @change="onChange"
                        @ok="onOk"
                        v-model="receivableForm.payBackDate"
                      />
                    </a-form-model-item>
                    <a-form-model-item ref="file" label="银行回单" prop="file">
                      <a-upload
                        :showUploadList="{ showRemoveIcon: false }"
                        accept=".doc,.docx,.xls,.xlsx,.pdf,.jpg, .jpeg, .png"
                        :before-upload="beforeUpload"
                        list-type="picture"
                        class="upload-list-inline"
                        :fileList="fileList"
                        :default-file-list="[]"
                        @change="upLoad"
                        @remove="removeChange"
                      >
                        <a-button> <a-icon type="upload" /> 点击上传 </a-button>
                      </a-upload>
                    </a-form-model-item>
                    <a-form-model-item ref="remark" label="备注" prop="remark">
                      <a-input v-model="receivableForm.remark" type="textarea" placeholder="请输入" />
                    </a-form-model-item>
                  </a-form-model>
                </a-modal>
                <a-table
                  rowKey="id"
                  :loading="loading2"
                  :columns="receivableColumns"
                  :data-source="receivableList"
                  :pagination="false"
                  style="margin-top: 20px"
                >
                  <a slot="file" slot-scope="text">
                    <div v-if="JSON.parse(text).length">
                      <p v-for="(item, index) in JSON.parse(text)" :key="index" style="color: var(--primary)">
                        <a :href="`${item}?token=${$store.state.auth.token}`" target="_blank">
                          {{ item.substr(item.lastIndexOf("/") + 1) }}
                        </a>
                      </p>
                    </div>
                    <div v-if="!JSON.parse(text).length">-</div>
                  </a>
                  <a slot="action" slot-scope="text, record" class="buttonStyle6">
                    <a-popconfirm :title="'确定删除吗?'" @confirm="deleteBack(record)"> 删除 </a-popconfirm>
                  </a>
                  <a slot="remark" slot-scope="text">
                    {{ text ? text : "-" }}
                  </a>
                  <a slot="receiveAmount" slot-scope="text">
                    {{ !text ? 0 : text.toLocaleString() }}
                  </a>
                  <a slot="payBackDate" slot-scope="text">
                    {{ text ? moment(text).format("YYYY-MM-DD") : "-" }}
                  </a>
                </a-table>
              </a-tab-pane>
              <a-tab-pane key="1" tab="开票记录">
                <a-button type="primary" style="margin-top: 10px" @click="showTicket" v-if="detailList.invoiceStatus !== 2">
                  新增开票记录
                </a-button>
                <a-modal v-model="ticketVisible" title="新增开票记录" @ok="handleTicketOk" @cancel="handleCancel2" :width="550">
                  <a-row class="header-title">
                    <div class="title-info">开票信息</div>
                    <hr class="title-line" />
                  </a-row>
                  <a-form-model
                    ref="ruleForm2"
                    :model="ticketForm"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                    style="margin-top: 15px"
                  >
                    <a-form-model-item
                      ref="invoiceAmount"
                      label="本次开票金额"
                      prop="invoiceAmount"
                      style="margin-bottom: 0"
                      :rules="{
                        required: true,
                        message: '请输入'
                      }"
                    >
                      <a-input-number :min="0" :max="999999" v-model="ticketForm.invoiceAmount" placeholder="请输入" />
                      <span style="font-size: 12px; color: #999999" v-if="detailList.uninvoicedAmount">
                        (本次开票金额不得高于未开票金额{{ !detailList.uninvoicedAmount ? 0 : detailList.uninvoicedAmount }})
                      </span>
                    </a-form-model-item>
                    <a-form-model-item
                      ref="invoiceDate"
                      label="本次开票时间"
                      prop="invoiceDate"
                      :rules="{
                        required: true,
                        message: '请选择'
                      }"
                    >
                      <a-date-picker
                        :disabled-date="disabledDate"
                        v-model="ticketForm.invoiceDate"
                        placeholder="选择开票时间"
                        @change="onChange"
                        @ok="onOk"
                      />
                    </a-form-model-item>
                    <a-form-model-item ref="file" label="附件" prop="file">
                      <UploadGeneralInline
                        v-model="urlList2"
                        :limit="10"
                        :disabled="false"
                        accept=".doc, .docx, .xls, .xlsx, .pdf, .zip, .rar, .jpg, .jpeg, .png"
                      />
                    </a-form-model-item>
                    <a-form-model-item ref="remark" label="备注" prop="remark">
                      <a-input v-model="ticketForm.remark" type="textarea" placeholder="请输入" />
                    </a-form-model-item>
                  </a-form-model>
                </a-modal>
                <a-table
                  rowKey="id"
                  :loading="loading3"
                  :columns="ticketColumns"
                  :data-source="ticketList"
                  :pagination="false"
                  style="margin-top: 20px"
                >
                  <a slot="file" slot-scope="text">
                    <div v-if="JSON.parse(text).length">
                      <p v-for="(item, index) in JSON.parse(text)" :key="index" style="color: #6a66f6">
                        <a :href="`${item}?token=${$store.state.auth.token}`" target="_blank">
                          {{ item.substr(item.lastIndexOf("/") + 1) }}
                        </a>
                      </p>
                    </div>
                    <div v-if="!JSON.parse(text).length">-</div>
                  </a>
                  <a slot="invoiceAmount" style="position: relative" slot-scope="text, record">
                    <img
                      :src="abolitionImg"
                      v-if="record.isVoid === false"
                      style="position: absolute; top: -16px; left: -15px; width: 50px; height: 50px"
                    />
                    <p style="margin-left: 20px; margin-bottom: 0">
                      {{ !text ? 0 : text.toLocaleString() }}
                    </p>
                  </a>
                  <a slot="remark" slot-scope="text">
                    {{ text ? text : "-" }}
                  </a>
                  <a slot="action" slot-scope="text, record">
                    <span v-if="record.isVoid === true" class="buttonStyle6">
                      <a-popconfirm :title="'确定作废吗?'" @confirm="wasteTicket(record)"> 作废 </a-popconfirm>
                    </span>
                    <span v-if="record.isVoid === false" class="buttonStyle6"> 作废 </span>
                  </a>
                  <a slot="invoiceDate" slot-scope="text">
                    {{ text ? moment(text).format("YYYY-MM-DD") : "-" }}
                  </a>
                </a-table>
              </a-tab-pane>
            </a-tabs>
          </div>
        </a-layout-content>
      </a-layout>
    </div>
  </a-spin>
</template>

<script>
import UploadGeneralInline from "xqjr-plugin-common/FileHandler/UploadGeneralInline.vue";
const receivableColumns = [
  {
    title: "实际到账金额",
    dataIndex: "receiveAmount",
    key: "receiveAmount",
    width: 120,
    scopedSlots: { customRender: "receiveAmount" }
  },
  {
    title: "创建人",
    dataIndex: "createUserName",
    key: "createUserName",
    width: 90
  },
  {
    title: "回款时间",
    dataIndex: "payBackDate",
    key: "payBackDate",
    scopedSlots: { customRender: "payBackDate" },
    width: 120
  },
  {
    title: "银行回单",
    dataIndex: "file",
    key: "file",
    width: 120,
    scopedSlots: { customRender: "file" }
  },
  {
    title: "备注",
    dataIndex: "remark",
    key: "remark",
    width: 90,
    scopedSlots: { customRender: "remark" }
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    scopedSlots: { customRender: "action" },
    width: 60
  }
];
const ticketColumns = [
  {
    title: "实际开票金额",
    dataIndex: "invoiceAmount",
    key: "invoiceAmount",
    width: 120,
    scopedSlots: { customRender: "invoiceAmount" }
  },
  {
    title: "创建人",
    dataIndex: "createUserName",
    key: "createUserName",
    width: 90
  },
  {
    title: "开票时间",
    dataIndex: "invoiceDate",
    key: "invoiceDate",
    scopedSlots: { customRender: "invoiceDate" },
    width: 140
  },
  {
    title: "开票附件",
    dataIndex: "file",
    key: "file",
    width: 120,
    scopedSlots: { customRender: "file" }
  },
  {
    title: "备注",
    dataIndex: "remark",
    key: "remark",
    width: 90,
    scopedSlots: { customRender: "remark" }
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    scopedSlots: { customRender: "action" },
    width: 60
  }
];
import moment from "moment";
import axios from "axios";
import {
  addTicket,
  getTicket,
  getReceivable,
  addReceivable,
  deleteReord,
  deleteBackRecord,
  wasteTicketReord,
  getCustomerDetail
} from "@/api/settlement/settlement";
import { isContainByString } from "@/utils/index";
export default {
  name: "FileAdd",
  components: { UploadGeneralInline },
  data() {
    return {
      detailList: {},
      routerData: JSON.parse(this.$route.query.routerData),
      loading2: false,
      loading3: false,
      receivableList: [],
      ticketList: [],
      receivableColumns,
      ticketColumns,
      receivableVisible: false,
      ticketVisible: false,
      abolitionVisible: false,
      loading: true,
      urlList: [],
      urlList2: [],
      fileList: [],
      abolitionImg: require("@/assets/home/feichu.png"),
      receivableForm: {},
      ticketForm: {},
      detailCompanyId: "",
      fixedSalaryTemplateName: null,
      addForm: {
        name: ""
      },
      companyId: this.$store.state.hr.companyId,
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
      continue1: true,
      continue2: true,
      isContainByString
    };
  },

  created() {
    this.currentPage = this.$route.query.currentPage;
    this.detailCompanyId = JSON.parse(this.$route.query.routerData).companyId;

    this.showDetailTable();
    this.getCustomerDetailList();
  },

  beforeDestory() {
    this.clearInterval(this.timer);
  },
  methods: {
    // 查询详情
    getCustomerDetailList() {
      this.loading = true;
      getCustomerDetail(this.routerData.id).then((res) => {
        this.detailList = res.data;
        this.loading = false;
      });
    },
    // 确定废除？
    showAbolition() {
      this.abolitionVisible = true;
    },
    handleAbolition() {
      deleteReord(this.routerData.id).then((res) => {
        this.abolitionVisible = false;
        this.$notification["success"]({
          message: "success",
          description: "删除成功"
        });
        this.goBack();
      });
    },
    // 回款点击确定
    handleReceivableOk() {
      setTimeout(() => {
        this.continue1 = true; // 点击一次时隔两秒后才能再次点击
      }, 2000);
      if (this.continue1 === true) {
        this.continue1 = false;

        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            addReceivable({
              payBackDate: this.receivableForm.payBackDate,
              receiveAmount: this.receivableForm.receiveAmount,
              remark: this.receivableForm.remark,
              customerSettlementId: this.routerData.id,
              file: this.urlList,
              companyId: this.detailCompanyId
            })
              .then((res) => {
                this.receivableVisible = false;
                this.fileList = [];
                this.$notification["success"]({
                  message: "success",
                  description: "新增回款成功"
                });
                this.showDetailTable();
                this.getCustomerDetailList();
              })
              .catch((err) => {
                console.log("debug log --> ", err);
              });
          }
        });
      }
    },
    handleCancel2() {
      this.urlList2 = [];
    },
    // 开票点击确定
    handleTicketOk() {
      setTimeout(() => {
        this.continue2 = true; // 点击一次时隔两秒后才能再次点击
      }, 2000);
      if (this.continue2 === true) {
        this.continue2 = false;

        this.$refs.ruleForm2.validate((valid) => {
          if (valid) {
            addTicket({
              invoiceDate: this.ticketForm.invoiceDate,
              invoiceAmount: this.ticketForm.invoiceAmount,
              remark: this.ticketForm.remark,
              customerSettlementId: this.routerData.id,
              file: this.urlList2.split(","),
              companyId: this.detailCompanyId
            })
              .then((res) => {
                this.fileList2 = [];
                this.ticketVisible = false;
                this.$notification["success"]({
                  message: "success",
                  description: "新增开票成功"
                });
                this.showDetailTable();
                this.getCustomerDetailList();
              })
              .catch((err) => {
                console.log("debug log --> ", err);
              });
          }
        });
      }
    },
    handleCancel() {
      this.fileList = [];
    },
    removeChange(e, a) {},
    beforeUpload(file) {
      const formData = new FormData();
      formData.append("files", file);
      axios({
        url: `/file/api/v1/site/default/upload/inline`,
        method: "post",
        data: formData,
        headers: { token: this.$store.state.auth.token }
      })
        .then((res) => {
          res.data.data.forEach((item, index) => {
            this.urlList.push(item);
          });
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
      return false;
    },
    // 回款
    upLoad(file) {
      this.fileList = file.fileList;
    },
    showReceivable(record, tag) {
      this.urlList = [];
      // this.receivableList = [];
      this.continue1 = true;
      this.receivableVisible = true;
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate();
      });
      this.receivableForm = {};
    },
    // 开票
    showTicket() {
      this.urlList2 = [];
      this.loading3 = false;
      this.ticketVisible = true;
      this.continue2 = true;
      this.$nextTick(() => {
        this.$refs.ruleForm2.clearValidate();
      });

      this.ticketForm = {};
    },
    // 废除开票记录
    wasteTicket(record) {
      this.loading3 = true;
      wasteTicketReord(record.id).then((res) => {
        this.showDetailTable();
        this.getCustomerDetailList();
        this.$notification["success"]({
          message: "success",
          description: "废除成功"
        });
      });
    },
    // 删除回款记录
    deleteBack(record) {
      this.loading2 = true;
      deleteBackRecord(record.id).then((res) => {
        this.showDetailTable();
        this.getCustomerDetailList();
        this.$notification["success"]({
          message: "success",
          description: "删除成功"
        });
      });
    },
    disabledDate(current) {
      return current > moment().endOf("day");
    },

    // 请求数据列表
    showDetailTable() {
      this.loading2 = true;
      this.loading3 = true;
      getReceivable(this.routerData.id).then((res) => {
        this.receivableList = res.data ? res.data : [];
        this.loading2 = false;
        this.loading3 = false;
      });
      getTicket(this.routerData.id).then((res) => {
        this.ticketList = res.data ? res.data : [];
        this.loading3 = false;
        if (this.isticketShow === true) {
          this.$nextTick(() => {
            this.$refs.ruleForm2.clearValidate();
          });
        }
        this.ticketForm = {};
      });
    },
    goBack() {
      this.$router.push({
        path: this.isContainByString("settlementAdmin") ? "/settlementAdmin/record" : "/settlement/record",
        query: {
          currentPage: this.currentPage
        }
      });
    },
    onOk() {},
    onChange() {}
  }
};
</script>
<style lang="scss" scoped>
// .anticon-delete {
//   display: none;
// }
$body-width: calc(100% - 338px);
.border-r-line {
  border-right: 1px solid #e8e8e8;
  border-top: 0.5px solid #e8e8e8;
}
.modelBotton {
  margin-left: 15px;
}
.head {
  .anticon-left {
    z-index: 3;
    left: 24px;
    position: absolute;
    color: #595959;
    font-size: 20px;
    margin-top: 21px;
  }
  .left2 {
    z-index: 3;
    left: 50px;
    position: absolute;
    color: #595959;
    font-size: 16px;
  }
  font-size: 16px;
  color: #000;
  font-weight: 500;
  text-align: center;
  line-height: 60px;
  height: 60px;
  border-bottom: 1px solid #e8e8e8;
}
.buttonStyle {
  width: 60px;
  height: 20px;
  background: rgba(255, 165, 38, 0.1);
  border-radius: 2px;
  border: 1px solid rgba(255, 165, 38, 0.6);
  font-size: 11px;
  font-weight: 400;
  color: #ffa600;
}
.buttonstyle2 {
  width: 60px;
  height: 20px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  font-size: 11px;
  font-weight: 400;
  color: #767885;
}
.buttonStyle3 {
  width: 60px;
  height: 20px;
  background: rgba(36, 205, 170, 0.1);
  border-radius: 2px;
  border: 1px solid #24cdaa;
  font-size: 11px;
  font-weight: 400;
  color: #24cdaa;
}
.fix-item-wrapper {
  margin-top: 25px;
  display: flex;
  justify-content: space-between;
  // width: 100%;
  height: 120px;
  background: #ffffff;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 33px 48px;
  border: 1px solid #e8e8e8;
  display: flex;
  .fix-item-two {
    padding-left: 45px;
    margin-top: 10px;
    width: 55%;
    height: 45px;
    padding-right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .childpProjectName {
    font-size: 14px;
    font-weight: 400;
    color: #767885;
    // text-align:center
  }
  .childContentName {
    font-size: 18px;
    font-weight: bold;
    color: #55565d;
    text-align: center;
    margin-top: 10px;
    color: var(--primary);
  }
}
.buttonStyle6 {
  color: var(--primary);
}
.header-title {
  display: flex;
  height: 30px;
  padding-top: 3px;
  .title-info {
    font-size: 16px;
    font-weight: 500;
    color: #3c3d43;
    line-height: 24px;
    width: 120px;
    height: 22px;
    margin-right: 10px;
    padding-left: 15px;
  }
  .title-info:before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: auto;
    right: auto;
    height: 20px;
    width: 3px;
    background-color: var(--primary);
  }
  .title-line {
    flex: 1;
    margin-top: 10px;
    height: 1px;
    border: none;
    background: #e8e8e8;
  }
}
.detailBox {
  padding: 14px 0 0 0;
  display: flex;
  justify-content: space-around;
  .detailName {
    width: 100px;
    font-size: 14px;
    font-weight: 400;
    text-align: right;
    color: #adadad;
  }
  .detail {
    width: 80px;
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    color: #3c3d43;
  }
}
</style>
